<template>
	<view>
		<view class="header d-flex align-center j-start bg-white">
			<view class="p-2">
				 <image :src="user_header" style="width: 100rpx;" mode="widthFix"></image> 
			</view>
			<view>
				<text class="text-black px" style="font-size: 3.46vw;">
					{{nick_name}}
				</text>
				<text class="text-light-muted px" style="font-size: 3.2vw;">
					{{user_ip_address}}
				</text>
			</view>
		</view>
		<view class="itemList px-2 mt-2">
			<view v-for="item in fightRecordList"  class="item d-flex flex-column bg-white p-1 mb-2">
				<view @click="goToGoodDetail(item)" class="item-top mb-2 d-flex a-center j-start" style="border-bottom: 1px solid #f5f5f5">
					<view class="p-1" style="width: 30%;">
						<image mode="widthFix" style="width: 150rpx;" :src="item.good_header"></image>
					</view>
					<view class="d-flex flex-column j-center a-start" style="width: 70%;">
						<text class="text-black" style="overflow:hidden;text-overflow: ellipsis;">
							{{item.good_name}}
						</text>
						<text class="text-light-muted font-sm">
							价值：{{item.good_price}}
						</text>
						<view class="d-flex a-center j-sb" style="width: 100%;">
							<text class="text-light-muted font-sm">
								期号：{{item.good_period}}
							</text>
							<view @click.stop="showLotteryNum(item)">
								<text class="text-warning font-md">
									{{item.count_num}}次
								</text>
								<text class="text-gray cuIcon-right"></text>
							</view>
						</view>
					</view>
				</view>
				<view  v-if="item.status=='已揭晓'" class="item-bottom d-flex flex-column j-center">
					<view  class="d-flex a-center mb-1 j-start">
						<text style="width: 40%;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;" class="text-light-muted font-sm">
							中奖者：{{item.nick_name}}
						</text>
						<text style="width: 60%;"  class="text-light-muted font-sm">
							本期参与：<text class="text-warning">{{item.win_fight_time}}</text>人次
						</text>
					</view>
					<view class="d-flex a-center j-start">
						<text style="width: 40%;" class="text-light-muted font-sm">
							中奖号：<text class="text-warning">{{item.win_num}}</text>
						</text>
						<text style="width: 60%;" class="text-light-muted font-sm">
						   开奖时间：{{item.real_lottery_time}}
						</text>
					</view>
				</view>
				<view  v-else-if="item.status!='已揭晓'" class="item-bottom d-flex flex-column j-center">
					<view  class="d-flex a-center mb-1 j-start">
						<text style="width: 40%;" class="text-light-muted font-sm">
							中奖者：待开奖
						</text>
						<text style="width: 60%;"  class="text-light-muted font-sm">
							本期总需：<text class="text-warning">{{item.need_people}}</text>人次
						</text>
					</view>
					<view class="d-flex a-center j-start">
						<text style="width: 40%;" class="text-light-muted font-sm">
							中奖号：待开奖
						</text>
						<!-- <text style="width: 60%;" class="text-light-muted font-sm">
						   开奖时间：待开奖
						</text> -->
					</view>
				</view>
			</view>
			</view>
		<view class="cu-load" :class="loadding?'loading':'over'"></view>
		
		<!--显示中奖号码的抽屉-->
		<uni-drawer :width="dwidth" ref="showRight" mode="right" :mask-click="true"
			@change="change($event,'showRight')">
			<view class="scroll-view">
				<scroll-view class="scroll-view-box" scroll-y="true">
					<van-sticky>
						<view class="cu-list menu-avatar">
							<view class="cu-item">
								<view class="cu-avatar round lg"
									:style="'background-image:url('+user_header+');'">
								</view>
								<view class="content">
									<view class="text-grey" style="font-size: 11px;">{{nick_name}}</view>
									<view class="text-gray text-sm flex">
										<view class="text-cut"  style="font-size: 11px;">
											<!-- <text class="cuIcon-infofill text-red  margin-right-xs"></text> -->
											{{ new Date(selectedUser.create_time).Format("yyyy-MM-dd hh:mm:ss") }}
										</view>
									</view>
									<view class="d-flex" style="font-size: 11px;">
										<text>购买</text>
										<view class="text-warning font-md px-1" style="font-size: 11px;">{{selectedUser.count_num}}次</view>
									</view>
								</view>
							</view>
						</view>
					</van-sticky>
					<view>
						<!--抽奖号码面板-->
						<text
							style="display: inline-block;float: left; margin: 10px 5px;font-size: 12px;width: 98rpx;"
							v-for="(item,index) in selectedUser.fightRecordList" :key="index">
							{{item.fight_num}}
						</text>
					</view>
				</scroll-view>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	
	import {
		getOtherFightRecordList,
		getAllUserParticipation
	} from '@/api/lottery.js';
	
	export default{
		data(){
			return{
				pageIndex:1,
				fightRecordList:[],
				uid:"",
				user_header:'',
				nick_name:'',
				user_ip_address:'',
				loadding: false,
				pullUpOn: true,
				//抽屉宽度
				dwidth: 300,
				selectedUser:{}
			}
		},
		onLoad(options){
			this.uid=options.uid;
			this.user_header=options.user_header;
			this.nick_name=options.nick_name;
			this.user_ip_address=options.user_ip_address;
			Promise.all([this.getFightRecordList()])
		},
		methods:{
			getFightRecordList(){
				let that=this;
				let data={user_id:this.uid,status:'全部',page:this.pageIndex,limitNum:5}
				let result={};
				getOtherFightRecordList(data).then(res=>{
					that.pageIndex=that.pageIndex+1;
					result=res;
					//that.fightRecordList.concat(res);
					for(var i=0;i<res.length;i++){
						that.fightRecordList.push(res[i]);
					}
					if(JSON.stringify(result) == '{}'){
						this.loadding = false;
						this.pullUpOn = false;
					}
				});
			},
			goToGoodDetail(item){
				uni.navigateTo({
					url:"/pages/lottery/good_details/good_details?id="+item.id
				});
			},
			showLotteryNum(item){
				this.showDrawer(item);
			}, // 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			}, // 打开窗口
			showDrawer(data) {
				//console.log(data)
				let e='showRight';
				let item=data;
				let that=this;
				this.$refs[e].open();
				this.selectedUser=item;
				getAllUserParticipation({user_id:this.uid,goods_fight_id:item.id}).then(res=>{
					this.$set(that.selectedUser,"fightRecordList",res.fightRecordList);
					console.log(res)
				});
			}
		},
		onReachBottom(){
			if (!this.pullUpOn) return;
			this.loadding = true;
			if (this.pageIndex == 5) {
				this.loadding = false;
				this.pullUpOn = false;
			} 
			//else {
			// 	this.newsList = this.newsList.concat(this.loadData);
			// 	this.pageIndex = this.pageIndex + 1;
			// }
			let result=this.getFightRecordList();
		},//下拉刷新
		onPullDownRefresh(){
			Promise.all([this.getFightRecordList()]);
		}
	}
</script>

<style lang="scss" scoped>
	.item{
		height: 41vw;
		width: 94.1333333333vw;
		border-radius: 1.6vw
	}
</style>
